{{define "index/index.html"}}

    {{template "header"}}
    <style>
        * {
            list-style: none;
        }

        .fanglist > li {
            display: flex;
            height: 180px;
            padding: 10px 10px;
            border: 2px solid #bcd2b5;
            border-radius: 50px;
            margin-bottom: 20px;
        }

        .fanglist li .li-left {
            width: 80%;
            margin: 10px 0;
            border-right: 1px solid rgba(0, 0, 0, 0.41);
            font-size: 30px;
            font-weight: 100;
        }

        .li-left div {
            margin-bottom: 5px;
        }
        .li-left a {
            text-decoration: none;
            color: black;
        }
        .li-left span{
            color: #EE1B2E;
            font-weight: 400;
        }

        .title {
            font-size: 35px;
            height: 60px;
            font-weight: 400;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .li-right {
            width: 20%;
            text-align: center;
            font-size: 20px;
        }

        .li-right a {
            text-decoration: none;
            color: #EE1B2E;
        }

    </style>
    <div class="body">
        <div class="fanglist">

        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
    <script type="text/javascript">
        Push.Permission.request();

        var wsUri = "ws://" + window.location.host + "/ws";
        var output;
        websocket = new WebSocket(wsUri);
        websocket.onopen = function (evt) {
            console.log("链接成功")
        };
        websocket.onclose = function (evt) {
            console.log("结束")
            window.location.reload()
        };
        websocket.onmessage = function (evt) {
            if(evt.data != "heartbeat"){
                viewFand(evt.data)
            }
        };
        websocket.onerror = function (evt) {
            websocket.close();
        };
        // setInterval(function () {
        //     websocket.send('{"type":"ping"}');
        // }, 10000);


        function viewFand(info) {
            obj = JSON.parse(info)
            Push.create("有新的楼房", {
                body: obj.Title,
                timeout: 4000
            })

            html = "<li>" ;
                html += "<div class='li-left'>";
            html += "<a href='" + obj.Url + "' target='_blank'>";
            html += "<div class='title'>"+ obj.Title + "</div>";
            html += "<div>" + obj.Apartment + " | " + obj.Buildarea + " | " +obj.Floor + "/" +obj.Totalfloor + " | " + obj.Fitment + " | <span>" + obj.Price + "万元</span>" +"</div>";
            html += "<div> " + obj.District +" "+ obj.StreetName + " " + obj.Blockname + " " + obj.Address + " </div>";
            html += "</a>";
            html += "</div>";
            html += "<div class='li-right'>"
            html += "<a href='tel:"+ obj.Telno +"'>"
            html += "<div>";
            html += "<img src='/public/img/iphone.png' width='90'>";
            html += "</div>";
            html += "<div>"+obj.Contactor+"</div>";
            html += "<div>" + obj.Telno + "</div>";
            html += "</a>";
            html += "</div>";
            html += "</li>";

            $(".fanglist").prepend(html)
        }
    </script>
    {{template "footer"}}

{{end}}